<template>
    <div class="screenMap">
        <div id="echart_china" ref="echart_china"></div>
        <div class="pub-pos-a map-left-value">
            <ul>
                <li>北京分公司(63万平米)</li>
                <li>北京房山分公司(63万平米)</li>
                <li>北京门头沟分公司(44万平米)</li>
                <li>北京通州分公司(51万平米)</li>
                <li>北京顺义分公司(13万平米)</li>
                <li>北京大兴分公司(10万平米)</li>
                <li>北京朝阳分公司(0万平米)</li>
                <li>北京第一分公司(0万平米)</li>
                <li>天津分公司(65万平米)</li>
                <li>保定分公司(43万平米)</li>
                <li>成都分公司(172万平米)</li>
                <li>武汉分公司(55万平米)</li>
                <li>西安分公司(0万平米)</li>
                <li>重庆分公司(0万平米)</li>
                <li>昆明分公司(0万平米)</li>
                <li>贵阳分公司(160万平米)</li>
                <li>贵安新区分公司(21万平米)</li>
            </ul>
        </div>
        <div class="pub-pos-b map-right-value">
            <ul>
                <li>长春分公司(64万平米)</li>
                <li>大连分公司(31万平米)</li>
                <li>延吉分公司(19万平米)</li>
                <li>济南分公司(0万平米)</li>
                <li>合肥分公司(206万平米)</li>
                <li>南京分公司(39万平米)</li>
                <li>徐州分公司(20万平米)</li>
                <li>苏州分公司(0万平米)</li>
                <li>上海分公司(30万平米)</li>
                <li>杭州分公司(58万平米)</li>
                <li>宁波分公司(0万平米)</li>
                <li>象山分公司(8万平米)</li>
                <li>嘉兴分公司(0万平米)</li>
                <li>福州分公司(0万平米)</li>
                <li>长沙分公司(80万平米)</li>
                <li>广州分公司(50万平米)</li>
                <li>佛山分公司(20万平米)</li>
                <li>南宁分公司(90万平米)</li>
            </ul>
        </div>
        <div class="charge">
            <div class="el-col-12 yesterday">
                <label class="font-s"
                    >今日实收<span class="font-s-data"
                        >2018-11-09 00:00:00</span
                    ></label
                >
                <h1>1605143<span class="font-s-unit">元</span></h1>
            </div>
            <div class="el-col-12 yesterday">
                <label class="font-s"
                    >累计实收<span class="font-s-data"></span
                ></label>
                <h1>46545<span class="font-s-unit">万元</span></h1>
            </div>
        </div>
        <div class="bottom-Statistics clearfix">
            <div class="yesterday float-left-c">
                <label class="font-s">在管面积</label>
                <h1>1548<span class="font-s-unit">万平米</span></h1>
            </div>
            <div class="yesterday float-left-c">
                <label class="font-s">在管户数</label>
                <h1>12<span class="font-s-unit">万</span></h1>
            </div>
            <div class="yesterday float-left-c">
                <label class="font-s">在管项目</label>
                <h1>78<span class="font-s-unit">个</span></h1>
            </div>
            <div class="yesterday float-left-c">
                <label class="font-s">储备项目</label>
                <h1>54<span class="font-s-unit">个</span></h1>
            </div>
        </div>
        <div
            v-if="title"
            style="
                position: absolute;
                display: block;
                border-style: solid;
                white-space: nowrap;
                z-index: 9999999;
                transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s,
                    top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
                border-width: 0px;
                border-color: rgb(51, 51, 51);
                border-radius: 4px;
                color: rgb(255, 255, 255);
                font: 14px / 21px 'Microsoft YaHei';
                padding: 5px;
                right: 0px;
                bottom: 0px;
                width: 200px;
                height: 200px;
                overflow: scroll;
                background: rgba(5, 11, 27, 0.5);
                pointer-events: auto;
            "
        >
            <p
                style="
                    height: 20px;
                    line-height: 10px;
                    border-bottom: 1px solid #2f343f;
                    padding-left: 10px;
                "
            >
                {{ title }}111
            </p>
            <div style="height: 190px; clear: both; padding-left: 10px">
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳水岸天街Ⅰ期
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳山语苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳水岸天街Ⅱ期
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳山锦苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳五彩生活广场
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳天筑苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳水岸广场
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳望水苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳山秀苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳观水苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳山水苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳悦水苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳山青苑
                </div>
                <div
                    style="
                        width: 50%;
                        float: left;
                        text-align: left;
                        font-size: 12px;
                    "
                >
                    贵阳悦水贵阳二戈寨地块（储备
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//导入地图文件
import chinamap from "echarts/map/json/china.json";
export default {
    data() {
        return {
            title: "",
            myChart: null,
        };
    },
    mounted() {
        // 1. 创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例
        this.myChart = this.$echarts.init(this.$refs.echart_china);

        this.init();
    },
    methods: {
        /*
      显示中国地图
    */
        init() {
            // 2. 注册可用的地图，只在 geo 组件或者map图表类型中使用
            this.$echarts.registerMap("china", chinamap); //用导入的json文件注册一个name:china的地图组件
            // 3. 设置图表 option
            var option = {
                geo: {
                    type: "map",
                    map: "china", //使用 registerMap 注册的地图名称
                    itemStyle: {
                        normal: {
                            areaColor: "rgb(3,21,37)",
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            //鼠标划过时的颜色
                            areaColor: "rgb(163,251,139)",
                        },
                    },
                },
                // backgroundColor: "rgba(0,0,0,0.2)",
                series: [
                    {
                        type: "effectScatter",
                        name: "xxx",
                        data: [
                            //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}]
                            { name: "北京", value: [116.41995, 40.18994] },
                            { name: "西安", value: [108.93, 34.27] },
                            { name: "上海", value: [121, 31] },
                            { name: "杭州", value: [120.19, 30.26] },
                        ],
                        coordinateSystem: "geo", // 使用坐标系
                        symbolSize: 5, // 涟漪大小
                        showEffectOn: "render", // 特效出现时机
                        rippleEffect: {
                            // 涟漪特效相关配置
                            brushType: "fill", // 涟漪款式，推荐这个，另一个有点丑
                            color: "#F4E925", // 涟漪颜色
                            scale: 4, // 波纹缩放比例
                        },
                        label: {
                            formatter: "{b}",
                            position: "right",
                            show: true,
                            fontSize: 12,
                            color: "#EE8467",
                            fontWeight: 700,
                        },
                        itemStyle: {
                            color: "#F4E925",
                        },
                        zlevel: 3,
                    },
                ],
            };
            console.log("option1:", option);

            // 只显示一个地图的时候，用option,option2都可以。如果要在地图上加散点图，用 option
            var option2 = {
                series: [
                    {
                        type: "map",
                        map: "china", //使用 registerMap 注册的地图名称
                    },
                ],
            };

            console.log("option2:", option2);

            // 4. 显示地图
            this.myChart.setOption(option); // 用 option 和 option2 效果一样
            this.myChart.on("click", function (params) {
                console.log(this.title);
                //点击事件
                this.title = JSON.parse(JSON.stringify(params.name));
                console.log(this.title);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.bottom-Statistics {
    display: flex;
    position: absolute;
    bottom: 1%;
    left: 3%;
    width: 100%;
    z-index: 100;
    text-align: left;
    .yesterday {
        margin: 10px;
        .font-s {
            padding: 10px 0;
            margin: 0;
            width: 100%;
            color: #b1e2fe;
            font-size: 12px;
            height: 16px;
            text-align: left;
        }
        h1 {
            color: #fff;
            font-size: 24px;
            span {
                font-size: 10px;
            }
        }
    }
}
.charge {
    position: absolute;
    top: 10%;
    left: 20%;
    width: 60%;
    z-index: 100;
    .font-s {
        font-size: 14px;
        color: #fff;
        .font-s-data {
            font-size: 10px;
        }
    }
    h1 {
        font-size: 30px;
        color: #b1e2fe;
        margin: 0;
        font-weight: 800;
        span {
            font-size: 13px;
        }
    }
}
.pub-pos-a {
    position: absolute;
    top: 10%;
    color: #fff;
    padding: 8px;
    z-index: 100;
    opacity: 0.5;
    background-color: #000;
    text-align: left;
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        font-size: 12px;
    }
}
.pub-pos-b {
    position: absolute;
    top: 10%;
    right: 10px;
    color: #fff;
    padding: 8px;
    z-index: 100;
    opacity: 0.5;
    background-color: #000;
    text-align: right;
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        font-size: 12px;
    }
}
::v-deep .screenMap {
    width: 100%;
    height: 60vh;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
#echart_china {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
    height: 100%;
}
</style>